﻿@model HomeControllerModel.Index
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>@(Model.Title)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="@(Model.Keywords)" />
    <meta name="description" content="@(Model.Description)" />
    @Asset.Style(Css.FontAwesome | Css.Bootstrap | Css.BootstrapTheme)
    @Asset.Style().Static("app.global.css", "app.base.css", "app.item.css")
    <style type="text/css">
        .ald-skuRight {
            position: absolute;
            top: 0;
            right: -200px;
            width: 200px;
            height: 100%;
            overflow: hidden;
            box-shadow: 2px 0 2px #ccc;
            transition: width .5s ease;
        }
    </style>
</head>
<body>
    @Html.Partial("Header")
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="item-detail clearfix">
                    <div>
                        <div class="item-detail-property">
                            <div class="item-detail-property-wrap">
                                <div class="property">
                                    <h4>
                                        @(Model.Item.Name)
                                    </h4>
                                    <h4 style="color: #e4393c">
                                        @(Model.Item.SubName)
                                    </h4>
                                    <div class="item-meta">
                                        <p>
                                            价格：<span id="price" class="item-price">@Model.Item.Price</span>
                                        </p>
                                    </div>
                                    <div class="item-sku">
                                        <dl class="dl-horizontal">
                                            @if (Model.Item.ProductItemSkus != null)
                                            {
                                                foreach (var o in Model.Item.ProductItemSkus.SaleProps())
                                                {
                                                    <dt>@(o.Key)：</dt>
                                                    <dd>
                                                        <ul class="list-inline">
                                                            @foreach (var v in o.Value)
                                                            {
                                                                var temp = Model.Item.PropImgs().FirstOrDefault(m => m.First == v.Key);
                                                                <li class="item-sku-prop" data-value="@(v.Key)">
                                                                    @if (temp != null)
                                                                    {
                                                                        <a class="item-sku-prop-img zoom" href="javascript:void(0);" style="background: #FFFFFF url('@(temp.Fourth)') no-repeat scroll center center ;" title="@v.Value" data-image="@(temp.Second)" data-zoom-image="@(temp.Second)">
                                                                            <span>&nbsp;&nbsp;&nbsp;</span>
                                                                        </a>
                                                                    }
                                                                    else
                                                                    {
                                                                        <a href="javascript:void(0);" title="@v.Value"><span>@v.Value</span></a>
                                                                    }
                                                                    <i></i>
                                                                </li>
                                                            }
                                                        </ul>
                                                    </dd>
                                                }
                                                <dt>数 量：</dt>
                                                <dd>
                                                    <div style="width: 100px; position: relative;">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="glyphicon glyphicon-minus"></i></span>
                                                            <input id="item-quantity" class="form-control" type="text" title="请输入购买量" maxlength="3"
                                                                   value="1" onkeyup="this.value=this.value.replace(/\D/g,'');" />
                                                            <span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                                                        </div>
                                                        <div class="text-danger" style="position: absolute; left: 110px; top: 8px; display: block;
                                                            width: 100%;">
                                                            库存(<span id="stock">@(Model.Item.Quantity)</span>)
                                                        </div>
                                                    </div>
                                                </dd>
                                            }
                                        </dl>
                                        <ul class="unstyled item-action">
                                            <li class="item-action-buy"><a href="javascript:void(0);"></a></li>
                                            <li class="item-action-add"><a href="javascript:void(0);"></a></li>
                                        </ul>
                                        <p>
                                            ss
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-detail-gallery">
                            <div class="item-brand">
                                <strong>@(Model.Item.BrandName)</strong>
                            </div>
                            <div class="gallery">
                                <div class="picture">
                                    <img id="zoom" src="@(Model.Item.Picture())"
                                         data-zoom-image="@(Model.Item.Picture)"
                                         alt="@(Model.Item.Name)" />
                                    <div class="zoom-icon">
                                    </div>
                                </div>
                                <div class="gallery-zoom">
                                    <div id="gallery-zoom-thumb" class='gallery-zoom-thumb'>
                                        @Model.Item.ItemImgs().Each(@<a class="@(item.Item.First ? "zoom" : string.Empty) @(item.Index == 0 ? "zoom-active" : string.Empty)" href='javascript:void(0);' data-image="@(item.Item.Third)" @(item.Item.First ? "data-zoom-image=" + item.Item.Second : string.Empty)>
                                            <img src="@(item.Item.Fourth)" />
                                        </a>
)
                                    </div>
                                   
                                </div>
                                <div class="action">
                                    <div class="placeholder">
                                        asdfasf
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="ald-skuRight" class="ald-skuRight ald ald-03054">
                        <div class="ald-inner ">
                            <div class="ald-hd">
                                <s></s><span>看了又看</span>
                            </div>
                            <div class="ald-carousel">
                                <div class="wrapCon">
                                </div>
                                <ul class="ald-switchable-trigger">
                                    <li class="ald-switchable-prev-btn">上一个</li>
                                    <li class="ald-switchable-next-btn">下一个</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-10">
                <div style="margin-top: 10px;">
                    <div class="item-attr">
                        <div class="item-attr-brand">
                        </div>
                        <ul class="item-attr-list unstyled clearfix">
                            @foreach (var o in Model.Item.Props())
                            {
                                <li>@o.Key ：@o.Value </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Html.Partial("Footer")
    @Asset.Script(Js.Underscore | Js.JQuery | Js.Bootstrap)
    @Asset.Script().Static("jquery.extend.js")
    @Asset.Script(Js.JQuerySlide | Js.JQueryElevateZoom)
    @Asset.Script().Static("app.global.js", "app.base.js", "app.item.js")

    <script type="text/javascript">
        $(function() {
            ayatta.item.init(@(Model.Item.Id),@(Model.Item.Price), @(Model.Item.Quantity), @(Model.SalePropCount), @(Html.Raw(Model.SkusJson)));
        })
    </script>
</body>
</html>
